<template>
	<view>
		<view class="search">
			<view class="search-box">
				<view class="icon">
					<image src="../../static/search.png"></image>
				</view>
				<input v-model="searchText" type="text" @confirm="handleSearch" confirm-type="search" class="search-input"
				 placeholder="请输入检查点名称">
			</view>
		</view>
		<view class="time">
			<text>总共：{{total}}条</text>
			<view class="range" @click="showPicker">{{chooseDate}}</view>
			<!-- <view :class="value == '请选择竣工时间' ? 'color':''" @click="selectDatePicker(type,index)">{{value}}</view> -->
		</view>
		<rangeDatePick ref="rangePicker" :show="isShow" @showchange="showchange" start="2000-01-01" end="2200-12-01" :value="value" @change="bindChange"
		 @cancel="bindCancel" themeColor="#4C83D6" fields="day"></rangeDatePick>
		<check-item v-if="checkList" @detail="goRecordDetail" :isShowHandle="false" :isShowArrow="true" :check-list="checkList"></check-item>
		<view v-else>
			<van-empty description="暂无记录" />
		</view>
		<uni-load-more v-if="checkList && checkList.length >= 6" :status="status" />
	</view>
</template>

<script>
	import CheckItem from '@/fireGridCheck/components/checkItem.vue'
	import rangeDatePick from '@/fireGridCheck/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	import dayjs from 'dayjs'
	export default {
		components: {
			CheckItem,
			rangeDatePick
		},
		data() {
			return {
				status: 'more',
				value: [],
				searchText: '',
				total: 0,
				checkList: [],
				params: {
					所属网格id: null,
					网格员id: null,
					巡检状态: 3,
					完成时间开始: null,
					完成时间结束: null,
					pagination: {
						current: 1,
						pageSize: 6
					},
					sorter: {
						field: "id",
						order: 1
					}
				},
				isShow: false,
				chooseDate: ''
			}
		},
		onLoad() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id
			this.params.网格员id = uni.getStorageSync('gridInfo').id
			this.getCurrentDate()
			this.getCheckTask()
		},
		onReachBottom() {
			console.log('触发上拉')
			if(this.status !== 'noMore' && this.checkList) {
				this.status = 'loading'
				this.getMoreCheckTask()
			}
		},
		watch: {
			searchText() {
				if(this.searchText === '') {
					this.params.检查点名称 = null
					this.getCheckTask()
				}
			}
		},
		methods: {
			handleSearch() {
				this.params.检查点名称 = this.searchText
				this.getCheckTask()
			},
			goRecordDetail(item) {
				uni.navigateTo({
					url: '/fireGridCheck/checkRecordDetail/checkRecordDetail?item=' + JSON.stringify(item)
				})
			},
			getCheckTask() {
				this.params.pagination.current = 1
				this.$http.post('gridSystem/inspection/list', this.params).then(res => {
					if (res.code === 10000) {
						console.log(res)
						this.checkList = res.data.list
						this.total = res.data.total
					}
				})
			},
			getMoreCheckTask() {
				this.params.pagination.current++
				this.$http.post('gridSystem/inspection/list', this.params).then(res => {
					if(res.code === 10000){
						if(res.data.list !== null) {
							this.checkList = this.checkList.concat(res.data.list)
						}
						// this.checkList = this.checkList && this.checkList.concat(res.data.list)
						if(this.checkList.length === res.data.total){
							this.status = 'noMore'
						}
					}
				})
			},
			getData(time) {
				console.log(time, '回调时间')
			},
			showchange(){
				this.$refs.rangePicker.init()
				this.value = this.chooseDate.split('至')
				this.isShow=!this.isShow;
			},
			// 装修期限
			bindChange(data){
				console.log('重选了')
				console.log(data)
				this.chooseDate=data[0]+"至"+data[1]
				let nowDate = new Date(data[1]).setHours(23,59,59,999)
				this.params.完成时间开始 = dayjs(data[0]).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params.完成时间结束 = dayjs(nowDate).format('YYYY-MM-DDTHH:mm:ssZ')
				this.getCheckTask()
			},
			showPicker(e){
				// this.$refs.rangePicker.init()
				this.value = this.chooseDate.split('至')
				this.isShow = true
			},
			bindCancel(e){
				console.log(e)
			},
			getCurrentDate() {
				
				let startDate = dayjs(new Date().setDate(1)).format('YYYY-MM-DD')
				let endDate = dayjs(new Date().setHours(23,59,59,999))
				let endTime = dayjs(new Date()).format('YYYY-MM-DD')
				this.chooseDate = startDate + '至' + endTime
				this.value = [startDate,endTime]
				this.params.完成时间开始 = dayjs(startDate).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params.完成时间结束 = dayjs(endDate).format('YYYY-MM-DDTHH:mm:ssZ')
			}
		}
	}
</script>

<style lang="scss">
	.search {
		// margin-left: 100rpx;
		padding-left: 60rpx;
		width: 750rpx;
		height: 96rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		display: flex;
		border: 2rpx solid #f5f5f5;
		align-items: center;
		// justify-content: center;
		position: relative;

		// padding-left: 50rpx;
		.search-box {
			width: 564rpx;
			height: 56rpx;
			padding-left: 17rpx;
			padding-right: 10rpx;
			color: #999;
			// background-color: pink;
			border: 2rpx solid #595959;
			border-radius: 28rpx;
			display: flex;

			//position: relative;
			.icon {
				width: 50rpx;
				height: 46rpx;
				margin-top: 3rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.search-input {
				flex: 1;
				height: 100%;
				color: #999;
				position: relative;
			}

			.clear-icon {
				width: 44rpx;
				height: 44rpx;
				color: #fff;
				border-radius: 50%;
				line-height: 40rpx;
				text-align: center;
				margin-top: 4rpx;
				background-color: #c8c9cc;
			}
		}
	}

	.time {
		display: flex;
		justify-content: space-between;
		// align-items: center;
		padding: 0 20rpx;
		height: 56rpx;
		border-bottom: 2rpx solid #F6F6F6;
		.range {
			color: #3699FF;
			&:after {
				content: '';
				width: 16rpx;
				height: 16rpx;
				display: inline-block;
				border-top: 4rpx solid #4CA1FF;
				border-right: 4rpx solid #4CA1FF;
				transform: rotate(45deg);
			}
		}
	}
</style>
